<template>
	<div class="privatecontent" v-if="privatecontent.length !== 0">
	  <div class="hd">
		<el-divider content-position="left"><h2>独家放送</h2></el-divider>
	  </div>
	  <div class="bd">
		<div class="item" v-for="(item, index) in privatecontent" :key="index" @click="videoItemClick(item.id)">
		  <div class="item-img">
			<img :src="item.sPicUrl" alt="" />
			<div class="icon">
			  <span class="iconfont icon-play-square"></span>
			</div>
		  </div>
		  <div class="item-text">
			{{ item.name }}
		  </div>
		</div>
	  </div>
	</div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue';
  import { useRouter } from 'vue-router';
  

  const props = defineProps({
	privatecontent: {
	  type: Array,
	  default: () => [],
	},
  });
  
  // 获取路由实例
  const router = useRouter();
  
  // 路由跳转方法
  const videoItemClick = (id) => {
	router.push({ name: "VideoDetail", params: { id, type: "mv" } });
  };
  </script>
  
  <style lang="less" scoped>
  .privatecontent {
	.bd {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: space-between;
	  width: 100%;
	  .item {
		width: 30%;
		border-radius: 18px;
		overflow: hidden; /* 防止内容溢出 */
		.item-img {
		  position: relative;
		  border-radius: 18px;
		overflow: hidden; /* 防止内容溢出 */
		  img {
			width: 100%;
		  }
		  .icon {
			position: absolute;
			top: 5px;
			right: 5px;
			color: #fff;
			.iconfont {
			  font-size: 32px;
			}
		  }
		}
		.item-text {
		  padding-top: 5px;
		  font-size: 14px;
		}
	  }
	}
  }
  </style>
  